<template>
 <div class="detail">
     <!-- 返回上一页的按钮 -->
    <van-button round type="info" icon="revoke" @click="$router.go(-1)" class="button"></van-button>
    <!-- 轮播图组件 -->
    <banner :banner="data.pics"></banner>
    <!-- 商品基本信息组件 -->
    <GoodsOne :basicInfo="data.basicInfo"></GoodsOne>
    <!-- 商品详情、评价组件 -->
    <van-tabs>
      <van-tab title="商品详情">
        <GoodsXin :content="data.content"></GoodsXin>
      </van-tab>
      <van-tab title="商品评价">
        <GoodsTwo :goodsid="$route.query.id"></GoodsTwo>
      </van-tab>
    </van-tabs>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="sum" @click="$router.push('/cart')"/>
      <van-goods-action-icon icon="shop-o" text="店铺" badge="0" />
      <van-goods-action-button type="warning" @click="addCartOne" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <!-- 商品弹出层 -->
      <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
        <van-card
          :price="data.basicInfo.minPrice"
          :title="data.basicInfo.name"
          :thumb="data.basicInfo.pic"/>
        <van-divider />
        <section v-for="(item,key) in data.properties" :key="item.id">
          <h2>{{item.name}}</h2>
          <ul class="sku">
            <li v-for="it in item.childsCurGoods" :key="it.id">
              <input type="radio" :value="it.id" :id="it.id" :name="item.name" style="display: none;" v-model="sku[key]">
              <label :for="it.id">{{it.name}}</label>
            </li>
          </ul>
        </section>
          <!-- {{sku}} -->
        <div class="div-bottom">
          <span>购买数量</span>
          <van-stepper v-model="number" @plus="jiaNum"/>
        </div>
        <van-button type="danger" @click="jiaCart" class="jiaCart">加入购物车</van-button>
      </van-popup>
 </div>
</template>
<script>
import { mapState, mapMutations, mapGetters } from "vuex";
import GoodsOne from "@/components/Detail/GoodsOne";
import GoodsTwo from "@/components/Detail/GoodsTwo";
import GoodsXin from "@/components/Detail/GoodsXin";
import banner from "@/components/Detail/banner";
import qs from "qs";
export default {
  name: "Detail",
  data() {
    return {
      data: [],
      show: false,
      flag: false,
      info: [],
      number: 1,
      sku: [],
      skuobj: {} //根据属性查询到的价格信息
    };
  },
  mounted() {
    let id = this.$route.query.id;
    this.getData(id);
  },
  methods: {
    jiaNum() {},
    jiaCart() {
      // 判断登录
      if (!this.token) {
        this.$toast.fail("请先登录");
        return this.$router.push("/login");
      }
      // 判断有没有选择属性参数
      if (this.sku.length == 0) {
        // 提示用户没有选择操作,然后关闭弹出层
        this.$notify({ type: "warning", message: "请选择商品规格" });
        this.show = false;
      }
      // 加入购物车的操作
      // console.log(this.skuobj);
      var index = this.cart.findIndex(item => {
        return item.skuid == this.skuobj.propertyChildIds;
      });
      if (index == -1) {
        // 不存在该规格的商品
        var obj = {
          goodsId: this.skuobj.goodsId,
          pic: this.data.basicInfo.pic,
          number: this.number,
          skuid: this.skuobj.propertyChildIds,
          skuname: this.skuobj.propertyChildNames,
          price: this.skuobj.price,
          flag: true,
          title: this.data.basicInfo.name
        };
        this.addCart(obj);
        // console.log(obj);
      } else {
        // 已存在该规格的商品
        var numobj = {
          index: index,
          number: this.number
        };
        this.addNum(numobj);
      }
      // 关闭弹出层
      this.$toast({ message: "成功加入购物车", icon: "checked" });
      this.show = false;
    },
    addCartOne() {
      this.show = true;
    },
    async getData(id) {
      let { data: res } = await this.$http.post(
        "https://api.it120.cc/small4/shop/goods/detail?id=" + id
      );
      console.log(res);
      this.data = res.data;
      // console.log(this.data.properties);
    },
    ...mapMutations(["addCart", "addNum"])
  },
  computed: {
    ...mapState(["cart", "token"]),
    ...mapGetters(["sum"])
  },
  watch: {
    sku: {
      async handler(val) {
        // 要拼接的字符串
        var str = "";
        // 遍历属性获取sku的id
        this.data.properties.forEach((item, key) => {
          if (val[key]) {
            str += item.id + ":" + val[key] + ",";
          }
        });
        // 去掉一个逗号“,”
        str = str.substr(0, str.length - 1);
        // 组合请求的对象
        var obj = {
          goodsId: this.$route.query.id,
          propertyChildIds: str
        };
        // 请求接口
        let { data: res } = await this.$http.post(
          "https://api.it120.cc/small4/shop/goods/price",
          qs.stringify(obj)
        );
        console.log(res);
        this.skuobj = res.data;
        // console.log(res);
      }
    }
  },
  components: {
    banner,
    GoodsXin,
    GoodsOne,
    GoodsTwo
  },
  activated() {
    var id = this.$route.query.id;
    this.getData(id);
  },
  deactivated() {
    this.detailObj = {};
  }
};
</script>
<style scoped>
.detail {
  overflow: auto;
}
.button {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.sku {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
label {
  box-sizing: content-box;
  display: inline-block;
  padding: 2px 4px;
  text-align: center;
}
input[type="radio"]:checked + label {
  background-color: bisque;
}
.jiaCart {
  width: 100%;
}
.div-bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
</style>